<template>
  <div class="currentDeviceContainer deviceGridContainer">
    <div class="deviceGridItem deviceGridItem1">
      <!-- <BgAnimation/> -->
        <div :class="cicleStyle">
          <div class="deviceContentStatus">{{vData.equipRunStatus}}</div>
          <div class="deviceContentStatusTitle">运行状态</div>
        </div>
    </div>
    <div class="deviceGridItem deviceGridItem2">
      <div>
        <div class="centerStyle deviceTitle">
          本日开始时间
        </div>
        <div class="centerStyle startTimeContent">
          {{vData.openTime}}
        </div>
      </div>
      <div style="margin-top: 20px;">
        <div class="centerStyle deviceTitle">
          上次关机时间
        </div>
        <div class="centerStyle startTimeContent">
          {{vData.closeTime}}
        </div>
      </div>
    </div>
    <div class="deviceNameContainer">
      {{current_equip_num?.equipName}}
    </div>
    <!-- <div class="deviceGridItem deviceGridItem3">

    </div> -->
  </div>
</template>
<script>
import {watch, ref, computed, reactive} from 'vue'
import circleStatus from './circleStatus.vue'
import BgAnimation from './BgAnimate.vue'
import {useVisualizingCustomerStore} from '/@/stores/visualizingCustomer'
import { storeToRefs } from 'pinia';
import {getEquipSinglestatus} from '/@/api/visualizing/slave'
import lodash from 'lodash'
import {getChineseEquaType} from '/@/views/visualizing/utils'
export default {
  components: {
    circleStatus,
    BgAnimation
  },
  setup() {
    const store = useVisualizingCustomerStore()
    const {customer_id,current_equip_num} = storeToRefs(store)
    const vData = reactive({
      status: '',
      closeTime: '无',
      equipRunStatus: '未知',
      openTime: '无',
    })
    const getEquipSinglestatusData = async () => {
      const res = await getEquipSinglestatus(customer_id.value, current_equip_num.value.equipNum)
      vData.closeTime = lodash.get(res, 'data.closeTime', '无')
      const status = lodash.get(res, 'data.equipRunStatus', '')
      vData.equipRunStatus = getChineseEquaType(status)
      vData.status = status
      vData.openTime = lodash.get(res, 'data.openTime', '无')
      setTimeout(() => {
        getEquipSinglestatusData()
      }, 1000*3);
    }

    const cicleStyle = computed(() => {
      const defaultStyle = ['centerStyle','deviceContent']
      if(vData.status === 'run') {
        return [...defaultStyle, 'deviceContent_run']
      } else if(vData.status === 'stop') {
        return [...defaultStyle, 'deviceContent_stop']
      } else if(vData.status === 'down') {
        return [...defaultStyle, 'deviceContent_down']
      } else if(vData.status === 'init') {
        return [...defaultStyle, 'deviceContent_init']
      } else if(vData.status === 'fault') {
        return [...defaultStyle, 'deviceContent_fault']
      } else {
        return [...defaultStyle, 'deviceContent_init']
      }
    })



    watch(()=>current_equip_num.value.id, (newVal, oldVal) => {
      getEquipSinglestatusData();
    },{deep: true})
    return {
      vData,
      customer_id,
      current_equip_num,
      cicleStyle
    }
    // getEquipSinglestatusData()
  }
}
</script>
<style lang="less" scoped>
@import url('/@/assets/less/visualizing.less');
.currentDeviceContainer {
  height: 100%;
  width: 100%;
}

.centerStyle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.deviceGridContainer {
  display: grid;
  grid-template-columns: 40% 60%;
  // grid-template-rows: 80% 20%;
}
.deviceNameContainer {
  position: absolute;
  top:5%;
  left: 5%;
  color: #75deef;
  font-size: 20px;
}

.deviceGridItem {
  padding: 20px;
}

.deviceGridItem1 {
  // grid-row: 1 / 2; /* 定义第一行 */
  // grid-column: 1 / 2; /* 定义第一列 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.deviceGridItem2 {
  grid-row: 1 / 2;
  /* 定义第一行 */
  grid-column: 2 / 3;
  /* 定义第二列 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.deviceGridItem3 {
  grid-row: 2 / 3;
  /* 定义第二行 */
  grid-column: 1 / 3;
  /* 定义合并的两列 */
  width: 100%;
}

.deviceTitle {
  font-size: 16px;
  font-weight: bold;
  color: #68C6D6;
}
.deviceContent {
  height: 120px;
  width: 120px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.deviceContent_run {
  background: #209ADF;
  -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breatheRun;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
}
.deviceContent_stop {
  background: #F59111;
}
.deviceContent_down {
  background: #163794;
}
.deviceContent_init {
  background: #163794;
}
.deviceContent_fault {
  background: #B21356;
  -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breatheFault;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: infinite;
}

.deviceContentStatusOuter {
  height: 140px;
  width: 140px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border:2px solid #209ADF;
  flex-direction: column;
  
}

.deviceContentStatus {
  font-size: 30px;
  color: #00FF00
}

.deviceContentStatusTitle {
  margin-top: -5px;
  font-size: 16px;
  color: #95EFFF;

}

.startTimeContent {
  font-size: 22px;
  color: #fff;
  margin-top: 4px;
  white-space: nowrap;
}</style>